import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:kq_flutter_core_widget/widgets/image/kq_image.dart';
import 'package:kq_flutter_tv_widgets/widgets/button/kq_outline_button.dart';
import 'package:kq_flutter_tv_widgets/widgets/card/kq_card.dart';
import 'package:kq_flutter_tv_widgets/widgets/card/kq_simple_card.dart';
import 'package:kq_flutter_tv_widgets/widgets/card/kq_task_card.dart';
import 'package:kq_flutter_tv_widgets_example/resources/Images.dart';

class KqCardPage extends StatefulWidget {
  const KqCardPage({super.key});

  @override
  State<KqCardPage> createState() => _KqCardPageState();
}

class _KqCardPageState extends State<KqCardPage> {
  bool isShowCard = false;
  bool isShowProgressCard = false;
  bool isShowSelectCard = false;
  bool isShowSimpleCard = false;
  bool isShowSubTitleSimpleCard = false;
  bool isShowSubTitleProgressSimpleCard = false;
  bool isShowSelectSimpleCard = false;
  bool isShowTaskCard = false;
  bool isShowTaskProgressCard = false;
  bool isSelect = false;
  bool isSimpleSelect = false;
  Color bgColor = Colors.white;
  bool testSelect = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          KqOutlineButton(
            title: 'KqCard',
            onTap: (tap) {
              isShowCard = !isShowCard;

              setState(() {});
            },
          ),
          Visibility(
              visible: isShowCard,
              child: KqCard(
                title: 'KqCard某某设备',
                subTitle: '产品编号：',
                subTitleContent: '232o3u2编号',
                imgType: ImageType.oss,
                defaultPic: Images.demoIcChoice16Sel,
                dividePosition: DividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderBackgroundColorCallback: () => Colors.red,
              )),
          KqOutlineButton(
            title: 'KqCard带进度条',
            onTap: (tap) {
              isShowProgressCard = !isShowProgressCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowProgressCard,
              child: KqCard(
                title: 'KqCard某某设备',
                subTitle: '产品编号：',
                subTitleContent: '232o3u2编号',
                bottomBtnsView: Row(
                  children: [Text('data')],
                ),
                imgType: ImageType.oss,
                defaultPic: Images.demoIcChoice16Sel,
                dividePosition: DividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderProgressLeftWidgetCallback: () => const Text(
                  '进度条左边文本',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressRightWidgetCallback: () => const Text(
                  '100/120',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressValueCallback: () => 100,
                renderTotalProgressValueCallback: () => 120,
              )),
          KqOutlineButton(
            title: 'KqCard可多选',
            onTap: (tap) {
              isShowSelectCard = !isShowSelectCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowSelectCard,
              child: KqCard(
                title: 'KqCard某某设备',
                subTitle: '产品编号：',
                subTitleContent: '232o3u2编号',
                bottomBtnsView: Row(
                  children: [Text('data')],
                ),
                imgType: ImageType.oss,
                defaultPic: Images.demoIcChoice16Sel,
                dividePosition: DividePosition.top,
                totalCount: 4,
                backgroundColor: bgColor,
                isCanSelect: true,
                isSelect: testSelect,
                onTap: () {
                  isSelect = !isSelect;
                  if (bgColor == Colors.blue) {
                    setState(() {
                      bgColor = Colors.white;
                      testSelect = !testSelect;
                    });
                  } else {
                    setState(() {
                      bgColor = Colors.blue;
                      testSelect = !testSelect;
                    });
                  }
                },
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderBackgroundColorCallback: () => Colors.red,
              )),
          KqOutlineButton(
            title: 'KqSimpleCard',
            onTap: (tap) {
              isShowSimpleCard = !isShowSimpleCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowSimpleCard,
              child: KqSimpleCard(
                title:
                    'KqSimpleCard某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设',
                dividePosition: SimpleDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
              )),
          KqOutlineButton(
              title: 'KqSimpleCard带副标题',
              onTap: (tap) {
                isShowSubTitleSimpleCard = !isShowSubTitleSimpleCard;
                setState(() {});
              }),
          Visibility(
              visible: isShowSubTitleSimpleCard,
              child: KqSimpleCard(
                title:
                    'KqSimpleCard某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设',
                subTitle: '点检模版：22222222222',
                dividePosition: SimpleDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
              )),
          KqOutlineButton(
            title: 'KqSimpleCard带副标题带进度条',
            onTap: (tap) {
              isShowSubTitleProgressSimpleCard =
                  !isShowSubTitleProgressSimpleCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowSubTitleProgressSimpleCard,
              child: KqSimpleCard(
                title:
                    'KqSimpleCard某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设',
                subTitle: '点检模版：22222222222',
                dividePosition: SimpleDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderProgressLeftWidgetCallback: () => const Text(
                  '进度条左边文本',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressRightWidgetCallback: () => const Text(
                  '100/120',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressValueCallback: () => 100,
                renderTotalProgressValueCallback: () => 120,
              )),
          KqOutlineButton(
            title: 'KqSimpleCard带副标题带进度条',
            onTap: (tap) {
              isShowSubTitleProgressSimpleCard =
                  !isShowSubTitleProgressSimpleCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowSubTitleProgressSimpleCard,
              child: KqSimpleCard(
                title:
                    'KqSimpleCard某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设',
                subTitle: '点检模版：22222222222',
                dividePosition: SimpleDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderProgressLeftWidgetCallback: () => const Text(
                  '进度条左边文本',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressRightWidgetCallback: () => const Text(
                  '100/120',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressValueCallback: () => 100,
                renderTotalProgressValueCallback: () => 120,
              )),
          KqOutlineButton(
            title: 'KqSimpleCard可多选',
            onTap: (tap) {
              isShowSelectSimpleCard = !isShowSelectSimpleCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowSelectSimpleCard,
              child: KqSimpleCard(
                title:
                    'KqSimpleCard某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设某某设备某某设备某某设备某某设备某某设备某某设备某某设备某某设',
                dividePosition: SimpleDividePosition.top,
                totalCount: 4,
                isCanSelect: true,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                renderBackgroundColorCallback: () => Colors.red,
              )),
          KqOutlineButton(
            title: 'KqTaskCard',
            onTap: (tap) {
              isShowTaskCard = !isShowTaskCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowTaskCard,
              child: KqTaskCard(
                title: 'KqTaskCard某某设备',
                subTitle: '产品编号：',
                subTitleContent: '232o3u2编号',
                imgType: ImageType.oss,
                defaultPic: Images.demoIcChoice16Sel,
                dividePosition: TaskDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                isSelect: isSelect,
                taskText: '任务数',
                taskNum: '20000',
              )),
          KqOutlineButton(
            title: 'KqTaskCard带进度条',
            onTap: (tap) {
              isShowTaskProgressCard = !isShowTaskProgressCard;
              setState(() {});
            },
          ),
          Visibility(
              visible: isShowTaskProgressCard,
              child: KqTaskCard(
                title: 'KqTaskCard某某设备',
                subTitle: '产品编号：',
                subTitleContent: '232o3u2编号',
                imgType: ImageType.oss,
                defaultPic: Images.demoIcChoice16Sel,
                dividePosition: TaskDividePosition.top,
                totalCount: 4,
                renderCrossAxisCountCallback: (row) {
                  return 2;
                },
                renderLeftTextCallback: (row, column) {
                  return '任务开工时间:';
                },
                renderTextCallback: (row, column) {
                  if (row == 0) {
                    return 'kjakljfkadfjlkajdflkajasss';
                  }
                  return '辣椒的饭卡就打发了大家福利卡的肌肤';
                },
                rowCountCallback: () => 2,
                renderTextMaxLineCallback: (row, column) => 1,
                isSelect: isSelect,
                taskText: '任务数',
                taskNum: '20000',
                renderProgressLeftWidgetCallback: () => const Text(
                  '进度条左边文本',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressRightWidgetCallback: () => const Text(
                  '100/120',
                  style: TextStyle(color: Colors.black, fontSize: 20),
                ),
                renderProgressValueCallback: () => 100,
                renderTotalProgressValueCallback: () => 120,
              )),
        ],
      ),
    );
  }
}
